<script setup lang="ts">
import { ElMessage, FormRules } from 'element-plus'
import { ref, reactive } from 'vue'
import { useUserStore } from '@/store/user'
import AvatarUpload from '@/components/AvatarUpload/index.vue'
import { UserInfo } from '../data.d'

const userStore = useUserStore()
//控制个人信息修改弹窗显示
const userInfoDialog = ref<boolean>(false)
//点击修改个人信息图标
const updateUserInfo = () => {
    userInfoDialog.value = true
    //重置表单
    userInfoFormRef.value.resetFields()
}
//对话框表单实例
const userInfoFormRef = ref()
//定义dialog对话框收集的信息
// 不要滥用any，去data.d里定义类型
const userInfo = reactive<UserInfo>({
    nickname: userStore.user.nickname,
    avatarUrl: userStore.user.avatarUrl || '',
    introduction: '',//介绍
})
//自定义效验
// 官方类型可以去element-plus官网查找
const nicknameValidator = (rule: FormRules, value: string, callback: (e?: Error) => void) => {
    if (!value.trim()) {
        return callback(new Error('昵称不能为空'))
    } else if (value.length > 8) {
        return callback(new Error('昵称长度不能超过8个字符'))
    } else {
        callback()
    }
}
const introductionValidator = (rule: FormRules, value: string, callback: (e?: Error) => void) => {
    if (value.length > 20) {
        return callback(new Error('个人介绍不能超过20个字符'))
    } else {
        callback()
    }
}
//对话框表单效验
const rules = ({
    nickname: [
        { required: true, trigger: 'change', validator: nicknameValidator },
    ],
    introduction: [
        { trigger: 'change', validator: introductionValidator }
    ]
})
//对话框表单确定按钮提交
const saveUserInfo = async () => {
    await userInfoFormRef.value.validate()
    //发请求
    //提示提交成功
    ElMessage.success('提交成功')
    userInfoDialog.value = false
}
//分享链接复制模块
const shareInputRef = ref()
const shareValue = ref('我是复制内容')
const updateShareDialog = ref<boolean>(false)
const copyShare = async () => {
    try {
        shareInputRef.value.select()//选中文本
        await navigator.clipboard.writeText(shareValue.value)//复制
        ElMessage.success('复制成功')
        //清除选中状态
        window.getSelection()?.removeAllRanges()
    } catch (error) {
        // 兼容性处理
        oldCopymethod()
    }
}
const oldCopymethod = () => {
    const input = shareInputRef.value?.$el.querySelector('input')
    if (input) {
        input.select()
        document.execCommand('copy')
        ElMessage.success('复制成功')
    }

}
//生成邀请海报
const shareDialog = ref<boolean>(false)
</script>

<template>
    <!-- 个人信息 -->
    <el-card>
        <template #header>
            <div class="person-card-header">
                <span>个人信息</span>
                <div>
                    <el-button @click="updateUserInfo" size="small" icon="Edit" circle />
                    <el-button @click="updateUserInfo" size="small" icon="Setting" circle />
                </div>
            </div>
        </template>
        <div class="person-card-body">
            <!-- img标签必须使用 /> 闭合 -->
            <img class="userAvatar" :src="userStore.user.avatarUrl || '/src/assets/avatar.gif'" alt="头像" />
            <span>{{ userStore.user.nickname }}</span>
            <div><img src="../images/LV1.png" alt="" /></div>
            <div>
                <el-button type="success" size="small" circle>微信</el-button>
                <el-button type="success" size="small" circle>QQ</el-button>
            </div>
            <p>{{ userInfo.introduction || '暂无个人简介' }}</p>
            <p>ID：{{ userStore.user.id }}</p>
        </div>
    </el-card>
    <!-- 开通会员 -->
    <el-card class="person-vip-card">
        <div class="person-vip-box">
            <div>
                <p class="person-vip-title">未开通永久会员</p>
                <p class="person-vip-text">畅刷9000+高频面试题</p>
            </div>
            <button>开通会员</button>
        </div>
    </el-card>
    <!-- 分享链接 -->
    <el-card>
        <template #header>
            <div class="person-share-header">
                <h3>分享有赏</h3>
                <a href="#">邀请记录</a>
            </div>
        </template>
        <div class="person-share-body">
            <div class="person-share-body-icon">
                <span>链接分享</span>
                <div @click="updateShareDialog = true" style="cursor: pointer;">
                    <el-icon>
                        <share />
                    </el-icon>
                </div>
            </div>
            <div class="person-share-body-input">
                <el-input placeholder="请输入内容" ref="shareInputRef" v-model="shareValue" disabled></el-input>
                <el-button type="primary" @click="copyShare">复制链接</el-button>
            </div>
            <p>海报分享</p>
            <el-button type="primary" @click="shareDialog = true">生成邀请海报</el-button>
        </div>
    </el-card>
    <!-- 推广模块 -->
    <el-card>
        <template #header>
            <h3>我的推广</h3>
        </template>
        <div class="person-promotion-body">
            <img :src="userStore.user.avatarUrl || '/src/assets/avatar.gif'" alt="头像" />
            <div>
                <h3>面试题目</h3>
                <span>暂无简介</span>
            </div>
            <div>微信公众号> </div>
        </div>
    </el-card>
    <!-- 个人信息修改对话框 -->
    <el-dialog v-model="userInfoDialog" title="修改个人信息:" width="40%">
        <!-- 统一的label-width在el-form上定义即可，需要特殊处理的才在el-form-item上单独定义 -->
        <el-form :rules="rules" :model="userInfo" ref="userInfoFormRef" label-width="80px" >
            <el-form-item label="头像:"  prop="avatarUrl">
                <AvatarUpload v-model="userInfo.avatarUrl"/>
            </el-form-item>
            <el-form-item label="昵称"  prop="nickname">
                <el-input v-model="userInfo.nickname" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="个人简介:"  prop="introduction">
                <el-input v-model="userInfo.introduction" type="textarea" placeholder="请输入个人简介"></el-input>
            </el-form-item>
            <el-form-item label="Github:" >
                <el-input placeholder="请输入Github"><template #prepend>Http://</template></el-input>
            </el-form-item>
            <el-form-item label="编程导航:" >
                <el-input placeholder="请输入邮箱"><template #prepend>Http://</template></el-input>
            </el-form-item>
            <el-form-item>
                <div class="form-button">
                    <el-button type="primary" @click="userInfoDialog = false">取消</el-button>
                    <el-button @click="saveUserInfo">确定</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 遮罩层 -->
    <div class="overlay" v-show="shareDialog" @click="shareDialog = false"></div>
    <!-- 邀请海报弹出框 -->
    <div class="share-dialog" v-show="shareDialog">
        <img style="width: 435px;height: 720px;" src="@/views/profile/user/images/poster-bg.svg" alt="" />
        <el-button style="width: 435px;margin-top: 20px;" size="large" type="success">生成邀请海报</el-button>
    </div>
    <el-dialog v-model="updateShareDialog" title="编辑分享链接" width="30%">
        <el-input placeholder="请输入内容"><template #prepend>{{ shareValue }}</template></el-input>
        <div style="margin-top: 20px;">
            <el-button @click="">更新</el-button>
            <el-button @click="updateShareDialog = false">取消</el-button>
        </div>
    </el-dialog>
</template>

<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    border-radius: 8px;
}

/* 个人信息卡片 */
.person-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-button {
        margin: 0 15px;
    }
}

.person-card-body {
    display: flex;
    flex-direction: column;
    /* 水平居中 */
    align-items: center;
    /* 设置子元素之间的间距为20px */
    gap: 20px;

    .userAvatar {
        width: 100px;
        /* 宽度 */
        height: 100px;
        /* 高度需与宽度相等 */
        border-radius: 50%;
        /* 关键属性：50%圆角 */
        object-fit: cover;
        /* 确保图片填充不变形 */
        overflow: hidden;
    }
}

/* 会员信息卡片 */
.person-vip-card {
    background: url("@/views/profile/user/images/bcg-01.avif");
    background-size: cover; //关键修复属性 
    background-repeat: repeat;
    background-position: center;
    background-attachment: local; //防止滚动时错位

    .person-vip-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .person-vip-title {
            font-size: 1.17rem;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .person-vip-text {
            font-size: 14px;
            color: #333;
        }

        button {
            padding: 0.5rem 1rem;
            font-weight: 700;
            background-color: #43403a;
            border-radius: 9999px;
            border: 2px solid #ede9e6;
            color: #ffecba;
            cursor: pointer; //鼠标悬停始终小手
            transition: opacity .3s ease;
        }
    }

}

/* 分享链接区域 */
.person-share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
        color: rgba(99, 64, 240, 0.88);
        font-weight: normal;
        font-size: 14px;
        // scss语法，& 代表上一层
        &:hover {
          color: rgba(178, 163, 241, 0.88);
        }
    }
}

.person-share-body {
    display: flex;
    flex-direction: column;
    //  控制所有子元素的统一间距 

    p {
        font-size: 14px;
        font-weight: 700;
        margin: 12px 0;
    }

    .el-button {
        border-radius: 8px;
        width: 100px;
    }

    .person-share-body-icon {
        display: flex;
        justify-content: space-between;

        .el-icon {
            margin-right: 20px;
        }
    }

    .person-share-body-input {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-button {
            border-radius: 8px;
            margin-left: 10px;
        }
    }

    span {
        font-weight: 700;
        margin-bottom: 12px;
    }
}

/* 推广卡牌区域 */
.person-promotion-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    img {
        width: 50px;
        /* 宽度 */
        height: 50px;
        /* 高度需与宽度相等 */
        border-radius: 50%;
        /* 关键属性：50%圆角 */
        object-fit: cover;
        /* 确保图片填充不变形 */
        overflow: hidden;
    }
}

//userInfo对话框表单按钮
.form-button {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

//遮罩层
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: fadeIn 0.3s ease-out forwards;
}


//推广海报
.share-dialog {
    position: fixed; //将元素脱离文档流并相对于浏览器窗口定位
    width: 435px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); //在X轴和Y轴上分别向左和向上移动自身宽高的50%
    z-index: 9999;
    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}


/* 关键帧定义 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
</style>
